<template>
  <div class="report">
    <div class="main-body">
      <span style="display: block;width: 15%;height: 40px;line-height: 40px;background-color: rgba(240,128,128,0);font-size: 20px;
      text-align: left;margin-left: 4%;margin-top: 1.8%;color: black;font-weight: 600;">检测报告</span>
      <span style="display: block;height: .8px;width: 96%;background-color: #F2F2F2;margin: 0 auto"></span>

      <div class="show-card">
        <div class="head-sp">
          <div class="logo">
            <svg class="icon" aria-hidden="true" style="width: 100%;font-size: 28px">
              <use xlink:href="#icon-shengbo"></use>
            </svg>
          </div>
          <div class="title">
            <span style="display: block;height: 50%;background-color: rgba(230,230,250,0);overflow:hidden;line-height: 50px;
            font-size: 19px;color: black;font-weight: 600;">源信号分析</span>
            <span style="display: block;height: 50%;background-color: rgba(240,128,128,0);line-height: 18px;
            font-size: 14px;color: #969BA0;letter-spacing: 0.5px">Source Signal Analysis</span>
          </div>
          <div class="descript">
            <div style="display: inline-block;width: 50%;height: 100%;background-color: rgba(250,240,230,0);position: relative">
              <span style="display: inline-block;width: 30%;height: 100%;background-color: rgba(240,128,128,0);
                margin-left: 20%;line-height: 80px;overflow: hidden;text-align: center;font-size: 26px;
                color: black;font-weight: 600;">520</span>
              <span style="display: inline-block;background-color: rgba(240,128,128,0);width: 20%;height: 50%;margin-top: 18px;
                overflow: hidden;position: absolute;line-height: 40px;color: #969BA0">KB</span>
            </div>
            <div style="display: inline-block;width: 50%;height: 100%;background-color: rgba(250,246,230,0);position:relative;">
              <span style="display: inline-block;width: 30%;height: 100%;background-color: rgba(240,128,128,0);
                margin-left: 20%;line-height: 80px;overflow: hidden;text-align: center;font-size: 26px;
                color: black;font-weight: 600;">3.72</span>
              <span style="display: inline-block;background-color: rgba(240,128,128,0);width: 20%;height: 50%;margin-top: 18px;
                overflow: hidden;position: absolute;line-height: 40px;color: #969BA0;">S</span>
            </div>
          </div>
        </div>
        <div style="width: 100%;height: 370px;background-color: rgba(255,255,255,0.2);">
          <div style="float:left;width: 35%;height: 98%;background-color: rgba(255,255,255,0.7);">
            <table style="width: 80%;height: 80%;background-color: rgba(255,254,253);margin: 10% auto">
              <tr>
                <th style="background-color: rgba(221,238,250,0.18);">属性</th>
                <th style="background-color: rgba(230, 230, 250, 0.12);">值</th>
              </tr>
              <tr>
                <td style="background-color: rgba(221,238,250,0.18);">音频长度</td>
                <td style="background-color: rgba(230, 230, 250, 0.12);">{{sample.time}}</td>
              </tr>
              <tr>
                <td style="background-color: rgba(221,238,250,0.18);">采样频率</td>
                <td style="background-color: rgba(230, 230, 250, 0.12);">{{sample.fs}}</td>
              </tr>
              <tr>
                <td style="background-color: rgba(221,238,250,0.18);">位深度</td>
                <td style="background-color: rgba(230, 230, 250, 0.12);">{{sample.bitDeep}}</td>
              </tr>
              <tr>
                <td style="border-bottom: none;background-color: rgba(221,238,250,0.18);">下采样率</td>
                <td style="border-bottom: none;background-color: rgba(230, 230, 250, 0.12);">{{sample.downsample_ratio}}</td>
              </tr>
            </table>
          </div>
          <div id="org-chart" style="width: 65%;height: 100%;background-color: rgba(253,247,249,0);float: right;line-height: 20px;"></div>
        </div>
      </div>

      <div class="show-card" style="margin-top: 30px">
        <div class="head-sp">
          <div class="logo">
            <svg class="icon" aria-hidden="true" style="width: 100%;font-size: 32px;font-weight: 600;">
              <use xlink:href="#icon-agora_AIjiangzao"></use>
            </svg>
          </div>
          <div class="title">
            <span style="display: block;height: 50%;background-color: rgba(230,230,250,0);overflow:hidden;line-height: 50px;
            font-size: 19px;color: black;font-weight: 600;">小波降噪</span>
            <span style="display: block;height: 50%;background-color: rgba(240,128,128,0);line-height: 18px;
            font-size: 14px;color: #969BA0;letter-spacing: 0.5px">Wavelet Noise Reduction</span>
          </div>
          <div class="descript">
            <div style="display: inline-block;width: 50%;height: 100%;background-color: rgba(250,240,230,0);position: relative">
              <span style="display: inline-block;width: 30%;height: 100%;background-color: rgba(240,128,128,0);
                margin-left: 20%;line-height: 80px;overflow: hidden;text-align: center;font-size: 26px;
                color: black;font-weight: 600;">520</span>
              <span style="display: inline-block;background-color: rgba(240,128,128,0);width: 20%;height: 50%;margin-top: 18px;
                overflow: hidden;position: absolute;line-height: 40px;color: #969BA0">KB</span>
            </div>
            <div style="display: inline-block;width: 50%;height: 100%;background-color: rgba(250,246,230,0);position:relative;">
              <span style="display: inline-block;width: 30%;height: 100%;background-color: rgba(240,128,128,0);
                margin-left: 20%;line-height: 80px;overflow: hidden;text-align: center;font-size: 26px;
                color: black;font-weight: 600;">3.72</span>
              <span style="display: inline-block;background-color: rgba(240,128,128,0);width: 20%;height: 50%;margin-top: 18px;
                overflow: hidden;position: absolute;line-height: 40px;color: #969BA0;">S</span>
            </div>
          </div>
        </div>
        <div style="width: 100%;height: 360px;background-color: rgba(196,243,232,0);">
          <div style="float:left;width: 50%;height: 100%;background-color: rgba(240,244,252,0.76);">
            <div id="filtered-chart" style="width: 96%;height: 80%;background-color: rgba(240,128,128,0);line-height: 20px;margin: 4% auto;margin-bottom: 8px;">
            </div>
            <div style="width: 42%;height: 30px;background-color: rgba(250,240,230,0);margin: 0 auto;line-height: 30px;">
              <span style="display: inline-block;width: 35%;height: 100%;color: #333333;font-weight: 550;text-align: center;overflow: hidden">降噪前&nbsp;&nbsp;/</span>
              <span style="display: inline-block;width: 65%;height: 100%;background-color: rgba(245,237,239,0);color: #969BA0;text-align: center;overflow: hidden">巴特沃斯滤波后</span>
            </div>
          </div>
          <div style="width: 50%;height: 100%;background-color: rgba(236,234,248,0.44);float: right">
            <div id="denoised-chart" style="width: 96%;height: 80%;background-color: rgba(240,128,128,0);line-height: 20px;margin: 4% auto;margin-bottom: 8px;">
            </div>
            <div style="width: 42%;height: 30px;background-color: rgba(250,240,230,0);margin: 0 auto;line-height: 30px;">
              <span style="display: inline-block;width: 100%;height: 100%;background-color: rgba(245,237,239,0);color: #333333;font-weight: 560;text-align: center;overflow: hidden">小波降噪后</span>
            </div>
          </div>
        </div>
      </div>

      <div class="show-card" style="margin-top: 30px">
        <div class="head-sp">
          <div class="logo" style="line-height: 50px;">
            <svg class="icon" aria-hidden="true" style="width: 100%;font-size: 18px;">
              <use xlink:href="#icon-fengexian"></use>
            </svg>
          </div>
          <div class="title">
            <span style="display: block;height: 50%;background-color: rgba(230,230,250,0);overflow:hidden;line-height: 50px;
            font-size: 19px;color: black;font-weight: 600;">心音分割</span>
            <span style="display: block;height: 50%;background-color: rgba(240,128,128,0);line-height: 18px;
            font-size: 14px;color: #969BA0;letter-spacing: 0.5px">Heart Sound Segmentation</span>
          </div>
          <div class="descript">
            <div style="display: inline-block;width: 50%;height: 100%;background-color: rgba(250,240,230,0);position: relative">
              <span style="display: inline-block;width: 30%;height: 100%;background-color: rgba(240,128,128,0);
                margin-left: 20%;line-height: 80px;overflow: hidden;text-align: center;font-size: 26px;
                color: black;font-weight: 600;">520</span>
              <span style="display: inline-block;background-color: rgba(240,128,128,0);width: 20%;height: 50%;margin-top: 18px;
                overflow: hidden;position: absolute;line-height: 40px;color: #969BA0">KB</span>
            </div>
            <div style="display: inline-block;width: 50%;height: 100%;background-color: rgba(250,246,230,0);position:relative;">
              <span style="display: inline-block;width: 30%;height: 100%;background-color: rgba(240,128,128,0);
                margin-left: 20%;line-height: 80px;overflow: hidden;text-align: center;font-size: 26px;
                color: black;font-weight: 600;">3.72</span>
              <span style="display: inline-block;background-color: rgba(240,128,128,0);width: 20%;height: 50%;margin-top: 18px;
                overflow: hidden;position: absolute;line-height: 40px;color: #969BA0;">S</span>
            </div>
          </div>
        </div>
        <div style="width: 100%;height: 360px;background-color: rgba(196,243,232,0);">
          <div style="float:left;width: 68%;height: 100%;background-color: rgba(240,246,252,0.8);">
            <div id="division-chart" style="width: 96%;height: 78%;background-color: rgba(240,128,128,0);line-height: 20px;margin: 4% auto;margin-bottom: 0;"></div>
            <div style="width: 42%;height: 30px;background-color: rgba(250,240,230,0);margin: 0 auto;line-height: 30px;">
              <span style="display: inline-block;width: 100%;height: 100%;background-color: rgba(245,237,239,0);color: #333333;font-weight: 560;text-align: center;overflow: hidden">心音分割效果图</span>
            </div>
          </div>
          <div style="width: 32%;height: 100%;background-color: rgba(253,250,247,0.59);float: right">
            <div style="width: 80%;height: 80%;background-color: rgba(230,230,250,0);margin: 10% auto">
              <div style="height: 40px;width: 100%;background-color: rgba(255,240,245,0);line-height: 40px;letter-spacing: 1px;color: #333333;font-weight: 560;">
                <span style="display: inline-block;overflow: hidden">标识</span>
                <span style="display: inline-block;height: 100%;width: 40px;background-color: transparent;overflow: hidden;color: #969BA0;font-size: 12px;
                font-weight: 500;line-height: 40px;margin-left: 5px">注释</span>
              </div>
              <div style="width: 100%;height: 40%;background-color: rgba(230,230,250,0.56);border-left: 3px solid #97b2f8;position: relative">
                <span style="display: inline-block;height: 30px;width: 100%;line-height: 30px;letter-spacing: 1px;
                background-color: rgba(255,240,245,0);margin-top: 0;position: absolute;color: #333333">&nbsp;&nbsp;阶梯曲线</span>
                <span style="display: inline-block;height: 20px;width: 100%;line-height: 20px;color: #969BA0;
                background-color: rgba(255,240,245,0);margin-top: 30px;position: absolute;font-size: 14px;">
                  &nbsp;&nbsp;&nbsp;表示心音信号状态值
                </span>
                <span style="display: inline-block;height: 20px;width: 100%;line-height: 20px;color: #969BA0;
                background-color: rgba(255,240,245,0);margin-top: 54px;position: absolute;font-size: 14px;">
                  &nbsp;&nbsp;&nbsp;1 &nbsp;—&nbsp; s1间期 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2 &nbsp;—&nbsp; 收缩期
                </span>
                <span style="display: inline-block;height: 20px;width: 100%;line-height: 20px;color: #969BA0;
                background-color: rgba(255,240,245,0);margin-top: 80px;position: absolute;font-size: 14px;">
                  &nbsp;&nbsp;&nbsp;3 &nbsp;—&nbsp; s2间期 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4 &nbsp;—&nbsp; 舒张期
                </span>

              </div>
              <div style="width: 98%;height: 1px;background-color: #ebebff;"></div>
              <div style="width: 100%;height: 40%;background-color: rgba(230,230,250,0.56);margin-top: 10px;border-left: 3px solid #97b2f8;position:relative;">
                <span style="display: inline-block;height: 30px;width: 100%;line-height: 30px;letter-spacing: 1px;
                background-color: rgba(255,240,245,0);margin-top: 0;position: absolute;color: #333333">&nbsp;&nbsp;信号曲线</span>
                <span style="display: inline-block;height: 20px;width: 100%;line-height: 20px;color: #969BA0;
                background-color: rgba(255,240,245,0);margin-top: 30px;position: absolute;font-size: 14px;">
                  &nbsp;&nbsp;&nbsp;表示经过前序处理后的心音信号
                </span>
                <span style="display: inline-block;height: 20px;width: 100%;line-height: 20px;color: #969BA0;
                background-color: rgba(255,240,245,0);margin-top: 54px;position: absolute;font-size: 14px;">
                  &nbsp;&nbsp;&nbsp;处理包括
                </span>
                <span style="display: inline-block;height: 20px;width: 100%;line-height: 20px;color: #969BA0;
                background-color: rgba(255,240,245,0);margin-top: 80px;position: absolute;font-size: 14px;">
                  &nbsp;&nbsp;&nbsp;巴特沃斯滤波 &nbsp;&nbsp; 小波降噪
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="show-card" style="margin-top: 30px;height: 640px;">
        <div class="head-sp">
          <div class="logo">
            <svg class="icon" aria-hidden="true" style="width: 100%;font-size: 32px;font-weight: 600;">
              <use xlink:href="#icon-qiehuan"></use>
            </svg>
          </div>
          <div class="title">
            <span style="display: block;height: 50%;background-color: rgba(230,230,250,0);overflow:hidden;line-height: 50px;
            font-size: 19px;color: black;font-weight: 600;">特征分析</span>
            <span style="display: block;height: 50%;background-color: rgba(240,128,128,0);line-height: 18px;
            font-size: 14px;color: #969BA0;letter-spacing: 0.5px">Characteristic Data Analysis</span>
          </div>
          <div class="descript">
            <div style="display: inline-block;width: 50%;height: 100%;background-color: rgba(250,240,230,0);position: relative">
              <span style="display: inline-block;width: 30%;height: 100%;background-color: rgba(240,128,128,0);
                margin-left: 20%;line-height: 80px;overflow: hidden;text-align: center;font-size: 26px;
                color: black;font-weight: 600;">520</span>
              <span style="display: inline-block;background-color: rgba(240,128,128,0);width: 20%;height: 50%;margin-top: 18px;
                overflow: hidden;position: absolute;line-height: 40px;color: #969BA0">KB</span>
            </div>
            <div style="display: inline-block;width: 50%;height: 100%;background-color: rgba(250,246,230,0);position:relative;">
              <span style="display: inline-block;width: 30%;height: 100%;background-color: rgba(240,128,128,0);
                margin-left: 20%;line-height: 80px;overflow: hidden;text-align: center;font-size: 26px;
                color: black;font-weight: 600;">3.72</span>
              <span style="display: inline-block;background-color: rgba(240,128,128,0);width: 20%;height: 50%;margin-top: 18px;
                overflow: hidden;position: absolute;line-height: 40px;color: #969BA0;">S</span>
            </div>
          </div>
        </div>
        <div style="width: 100%;height: 550px;background-color: rgba(235,242,252,0);overflow:hidden;">
          <div style="width: 98%;height: 470px;background-color: rgba(224,234,248,0); margin: 10px auto;line-height: 20px;">
            <el-tabs v-model="cur_characteristic" @tab-click="">
              <el-tab-pane label="时频域特征分析" name="first">
                <div style="width: 100%;height: 480px;background-color: rgba(255,255,255,1);margin: 1% 0;border-radius: 0 0 8px 8px">
                  <div style="float:left;width: 46%;height: 100%;background-color: rgba(230,230,250,0);">
                    <div style="width: 96%;height: 95%;background-color: rgba(250,250,210,0);margin: 5% 2%;">
                      <span style="display:block;height: 30px;width: 100%;background-color: rgba(250,240,230,0);
                      line-height: 30px;font-weight: 600;">&nbsp;&nbsp;时域比值类特征</span>
                      <table style="width: 100%;height: 90%;margin-top: 10px;background-color: #fff;">
                        <tr class="chart-tr">
                          <td class="chart-td chart-td-1">
                            <span style="display: block;width: 100%;height: 30px;background-color: rgba(250,240,230,0);
                            line-height: 36px;color: #333333;font-weight: 560;">
                              S1间期平均占比
                            </span>
                            <span style="display: block;width: 100%;height: 30px;background-color: rgba(250,245,230,0);
                            line-height: 30px;font-size: 12px">
                              S1间期占心音周期的比例
                            </span>
                          </td>
                          <td class="chart-td chart-td-2">
                            <div style="width: 100px;height: 70%;line-height: 100%;background-color: rgba(230,230,250,0);
                            margin-left: 30%;" id="circle-chart-1"></div>
                          </td>
                          <td class="chart-td chart-td-3">
                            <span style="display: block;width: 50px;height: 30px;background-color: rgba(250,240,230,0);
                            margin: auto auto;line-height: 36px;color: #333333;font-weight: 560;">{{proportion[0]}}%</span>
                            <span style="display: block;width: 80px;height: 30px;background-color: rgba(250,245,230,0);
                            margin: auto auto;line-height: 24px;font-size: 12px">平均占比</span>
                          </td>
                        </tr>
                        <tr class="chart-tr">
                          <td class="chart-td chart-td-1">
                            <span style="display: block;width: 100%;height: 30px;background-color: rgba(250,240,230,0);
                            line-height: 36px;color: #333333;font-weight: 560;">
                              收缩期平均占比
                            </span>
                            <span style="display: block;width: 100%;height: 30px;background-color: rgba(250,245,230,0);
                            line-height: 30px;font-size: 12px">
                              收缩期占心音周期的比例
                            </span>
                          </td>
                          <td class="chart-td chart-td-2">
                            <div style="width: 100px;height: 100%;line-height: 100%;background-color: rgba(230,230,250,0);
                            margin-left: 30%;" id="circle-chart-2"></div>
                          </td>
                          <td class="chart-td chart-td-3">
                            <span style="display: block;width: 50px;height: 30px;background-color: rgba(250,240,230,0);
                            margin: auto auto;line-height: 36px;color: #333333;font-weight: 560;">{{proportion[1]}}%</span>
                            <span style="display: block;width: 80px;height: 30px;background-color: rgba(250,245,230,0);
                            margin: auto auto;line-height: 24px;font-size: 12px">平均占比</span>
                          </td>
                        </tr>
                        <tr class="chart-tr">
                          <td class="chart-td chart-td-1">
                            <span style="display: block;width: 100%;height: 30px;background-color: rgba(250,240,230,0);
                            line-height: 36px;color: #333333;font-weight: 560;">
                              S2间期平均占比
                            </span>
                            <span style="display: block;width: 100%;height: 30px;background-color: rgba(250,245,230,0);
                            line-height: 30px;font-size: 12px">
                              S2间期占心音周期的比例
                            </span>
                          </td>
                          <td class="chart-td chart-td-2">
                            <div style="width: 100px;height: 70%;line-height: 100%;background-color: rgba(230,230,250,0);
                            margin-left: 30%;" id="circle-chart-3"></div>
                          </td>
                          <td class="chart-td chart-td-3">
                            <span style="display: block;width: 50px;height: 30px;background-color: rgba(250,240,230,0);
                            margin: auto auto;line-height: 36px;color: #333333;font-weight: 560;">{{proportion[2]}}%</span>
                            <span style="display: block;width: 80px;height: 30px;background-color: rgba(250,245,230,0);
                            margin: auto auto;line-height: 24px;font-size: 12px">平均占比</span>
                          </td>
                        </tr>
                        <tr class="chart-tr">
                          <td class="chart-td chart-td-1">
                            <span style="display: block;width: 100%;height: 30px;background-color: rgba(250,240,230,0);
                            line-height: 36px;color: #333333;font-weight: 560;">
                              舒张期平均占比
                            </span>
                            <span style="display: block;width: 100%;height: 30px;background-color: rgba(250,245,230,0);
                            line-height: 30px;font-size: 12px">
                              舒张期占心音周期的比例
                            </span>
                          </td>
                          <td class="chart-td chart-td-2">
                            <div style="width: 100px;height: 70%;line-height: 100%;background-color: rgba(230,230,250,0);
                            margin-left: 30%;" id="circle-chart-4"></div>
                          </td>
                          <td class="chart-td chart-td-3">
                            <span style="display: block;width: 50px;height: 30px;background-color: rgba(250,240,230,0);
                            margin: auto auto;line-height: 36px;color: #333333;font-weight: 560;">{{proportion[3]}}%</span>
                            <span style="display: block;width: 80px;height: 30px;background-color: rgba(250,245,230,0);
                            margin: auto auto;line-height: 24px;font-size: 12px">平均占比</span>
                          </td>
                        </tr>
                      </table>
                    </div>
                  </div>
                  <div style="float:right;width:54%;height: 100%;background-color: rgba(255,255,255,0.46);
                  line-height: 10px;position: relative">
                    <div style="position: absolute;width: 1.6px;height: 92%;background-color: rgba(238,238,238,0.66);margin-top: 4%;"></div>
                    <div style="width: 96%;height: 96%;background-color: rgba(250,240,230,0);margin: 2% auto">
                      <div style="width: 100%;height: 52px;background-color: rgba(230,230,250,0);line-height: 52px;font-weight: 600;">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时域特征曲线
                      </div>
                      <div style="width: 100%;height: 30px;background-color: rgba(230,230,250,0);line-height: 30px;
                        font-size: 14px;color: #969BA0">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;主要包括各类间期占比均值及标准差
                      </div>
                      <div id="mix-chart" style="width: 98%;height: 75%;background-color: rgba(230,230,250,0);line-height: 20px;
                      margin: 1% 1%;font-size: 14px;color: #969BA0">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="二阶谱特征分析" name="second">
                <div style="width: 100%;height: 480px;background-color: rgba(255,255,255,1);margin: 1% 0;border-radius:  0 0 8px 8px">
                  <div style="width: 37%;height: 100%;background-color: rgba(230,236,250,0.39);float: left;border-radius: 0 0 0 8px">
                    <div style="width: 90%;height: 90%;background-color: white;margin: 5% auto">
                      <div style="width: 100%;height: 50px;background-color: #fff;line-height: 60px;padding-bottom: 10px;
                        font-weight: 600;color: #333333;border-bottom: 1px solid #F2F2F2">&nbsp;
                       <span>
                         <svg style="width: 20px;height: auto" t="1650540099299" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15656" width="200" height="200"><path d="M901.3 357.4c-21.3-50.3-51.7-95.5-90.5-134.3-38.8-38.8-84-69.3-134.3-90.5C624.4 110.5 569 99.4 512 99.4s-112.4 11.2-164.5 33.2c-50.3 21.3-95.5 51.7-134.3 90.5-38.8 38.8-69.3 84-90.5 134.3-22 52.1-33.2 107.4-33.2 164.5s11.2 112.4 33.2 164.5c21.3 50.3 51.7 95.5 90.5 134.3 38.8 38.8 84 69.3 134.3 90.5 52.1 22 107.4 33.2 164.5 33.2s112.4-11.2 164.5-33.2c50.3-21.3 95.5-51.7 134.3-90.5 38.8-38.8 69.3-84 90.5-134.3 22-52.1 33.2-107.4 33.2-164.5s-11.2-112.4-33.2-164.5zM512 144.4c208.2 0 377.5 169.3 377.5 377.5 0 3.5-0.1 7-0.1 10.5h-58.9c-17.8 0-33.4-9.9-33.4-21.2v-106c0-14.3-7.4-28-20.2-37.6-11.7-8.8-27.1-13.6-43.2-13.6s-31.5 4.8-43.2 13.6c-12.8 9.6-20.2 23.3-20.2 37.6v242.9c0 11.3-15.6 21.2-33.4 21.2h-10.2c-17.8 0-33.4-9.9-33.4-21.2V284.2c0-14.3-7.4-28-20.2-37.6-11.7-8.8-27.1-13.6-43.2-13.6h-16.3c-16.2 0-31.5 4.8-43.2 13.6-12.8 9.6-20.2 23.3-20.2 37.6v434.3c0 11.3-15.6 21.2-33.4 21.2H397c-17.8 0-33.4-9.9-33.4-21.2V355.2c0-14.3-7.4-28-20.2-37.6-11.7-8.8-27.1-13.6-43.2-13.6h-9.7c-16.2 0-31.5 4.8-43.2 13.6-12.8 9.6-20.2 23.3-20.2 37.6v156c0 11.3-15.6 21.2-33.4 21.2h-58.9c-0.1-3.5-0.1-7-0.1-10.5-0.2-208.2 169.1-377.5 377.3-377.5z m0 755c-194.5 0-355-147.8-375.3-337h56.9c16.2 0 31.5-4.8 43.2-13.6 12.8-9.6 20.2-23.3 20.2-37.6v-156c0-11.3 15.6-21.2 33.4-21.2h9.7c17.8 0 33.4 9.9 33.4 21.2v363.4c0 14.3 7.4 28 20.2 37.6 11.7 8.8 27.1 13.6 43.2 13.6h19.4c16.2 0 31.5-4.8 43.2-13.6 12.8-9.6 20.2-23.3 20.2-37.6V284.2c0-11.3 15.6-21.2 33.4-21.2h16.3c17.8 0 33.4 9.9 33.4 21.2V648c0 14.3 7.4 28 20.2 37.6 11.7 8.8 27.1 13.6 43.2 13.6h10.2c16.2 0 31.5-4.8 43.2-13.6 12.8-9.6 20.2-23.3 20.2-37.6V405.2c0-11.3 15.6-21.2 33.4-21.2 17.8 0 33.4 9.9 33.4 21.2v106c0 14.3 7.4 28 20.2 37.6 11.7 8.8 27.1 13.6 43.2 13.6h56.9c-19.9 189.2-180.4 337-374.9 337z" fill="#1296db" p-id="15657"></path></svg>

                         二阶谱简介</span>
                      </div>
                      <div style="font-size: 14px;padding: 15px;line-height: 30px;color: rgb(150, 155, 160);text-indent: 2rem">
                        <p>信号的二阶谱分析通常被定义为对信号进行三阶累积量下的二阶傅里叶变换。</p>
                        <p>二阶谱分析可以很好地抑制信号中的相位关系，检测与量化非高斯信号的相位耦合。</p>
                         <p> 心音信号的性质是非高斯的，采用这种算法可以很好的消除白噪声（高斯噪声）并将信号的性质表示为图像，以提取正/异常心音信号中最具代表性的特征。
                        </p>

                      </div>
                    </div>
                  </div>
                  <div style="width: 63%;height: 100%;background-color: rgba(250,244,230,0);float: right">
                    <div style="position: absolute;width: 1px;height: 70%;background-color: rgba(238,238,238,0.66);margin-top: 10%;">

                    </div>
                    <div style="width: 96%;height: 90%;background-color: white;margin: 3% auto">
                      <div style="width: 100%;height: 50px;background-color: #fff;line-height: 60px;
                        font-weight: 600;color: #333333;border-bottom: 1px solid #F2F2F2">&nbsp;&nbsp;&nbsp;&nbsp;二阶谱特征图</div>
                      <div style="width: 100%;height: 30px;line-height: 30px;background-color: rgba(250,240,230,0);color: #969BA0;font-size: 14px">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;将二阶谱系数矩阵利用热力图的形式展示，颜色越深的像素系数越大
                      </div>

                      <div id="spectrum-chart" style="width: 96%;height: 76%;background-color: rgba(255,160,122,0);
                      margin-left: 2%;margin-top: 2%;"></div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="梅尔频谱特征分析" name="third">
                <div style="width: 100%;height: 480px;background-color: rgba(255,255,255,1);margin: 1% 0;border-radius:  0 0 8px 8px">
                  <div style="width: 37%;height: 100%;background-color: rgba(230,236,250,0.39);float: left;border-radius: 0 0 0 8px">
                    <div style="width: 90%;height: 90%;background-color: white;margin: 5% auto">
                      <div style="width: 100%;height: 50px;background-color: #fff;line-height: 60px;
                        font-weight: 600;color: #333333;border-bottom: 1px solid #F2F2F2">&nbsp;&nbsp;&nbsp;&nbsp;梅尔频谱系数</div>
                    </div>
                  </div>
                  <div style="width: 63%;height: 100%;background-color: rgba(250,244,230,0);float: right">
                    <div style="position: absolute;width: 1px;height: 70%;background-color: rgba(238,238,238,0.66);margin-top: 10%;"></div>
                    <div style="width: 96%;height: 90%;background-color: white;margin: 3% auto">
                      <div style="width: 100%;height: 50px;background-color: #fff;line-height: 60px;
                        font-weight: 600;color: #333333;border-bottom: 1px solid #F2F2F2">&nbsp;&nbsp;&nbsp;&nbsp;梅尔频谱特征图</div>
                      <div style="width: 100%;height: 30px;line-height: 30px;background-color: rgba(250,240,230,0);color: #969BA0;font-size: 14px">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;将梅尔频谱系数矩阵利用热力图的形式展示，颜色越深的像素系数越大
                      </div>

                      <div id="mel-chart" style="width: 96%;height: 76%;background-color: rgba(255,160,122,0);
                      margin-left: 2%;margin-top: 2%;"></div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>

      <div class="show-card" style="margin-top: 30px;height: 540px;">
        <div class="head-sp">
          <div class="logo" style="line-height: 50px;">
            <svg class="icon" aria-hidden="true" style="width: 100%;font-size: 20px;font-weight: 600;">
              <use xlink:href="#icon-21baogaozongjiezhuanqu"></use>
            </svg>
          </div>
          <div class="title">
            <span style="display: block;height: 50%;background-color: rgba(230,230,250,0);overflow:hidden;line-height: 50px;
            font-size: 19px;color: black;font-weight: 600;">综合评估</span>
            <span style="display: block;height: 50%;background-color: rgba(240,128,128,0);line-height: 18px;
            font-size: 14px;color: #969BA0;letter-spacing: 0.5px">Wavelet Noise Reduction</span>
          </div>
          <div class="descript">
            <div style="display: inline-block;width: 50%;height: 100%;background-color: rgba(250,240,230,0);position: relative">
              <span style="display: inline-block;width: 15%;height: 100%;background-color: rgba(240,128,128,0);
                margin-left: 20%;line-height: 80px;overflow: hidden;text-align: center;font-size: 26px;
                color: black;font-weight: 600;">4</span>
              <span style="display: inline-block;background-color: rgba(240,128,128,0);width: 60%;height: 50%;margin-top: 17px;
                overflow: hidden;position: absolute;line-height: 40px;color: #969BA0">Models</span>
            </div>
            <div style="display: inline-block;width: 50%;height: 100%;background-color: rgba(250,246,230,0);position:relative;">
              <span style="display: inline-block;width: 15%;height: 100%;background-color: rgba(240,128,128,0);
                margin-left: 20%;line-height: 80px;overflow: hidden;text-align: center;font-size: 26px;
                color: black;font-weight: 600;">2</span>
              <span style="display: inline-block;background-color: rgba(240,128,128,0);width: 60%;height: 50%;margin-top: 17px;
                overflow: hidden;position: absolute;line-height: 40px;color: #969BA0;">Classifications</span>
            </div>
          </div>
        </div>
        <div style="width: 100%;height: 448px;background-color: rgba(196,243,232,0);">
          <div style="float:left;width: 45%;height: 100%;background-color: rgba(255,255,255,1);border-radius: 0 0 0 8px;overflow: hidden">
            <div style="width: 98%;height: 96%;background-color: rgba(250,240,230,0);margin-left: 1%;margin-top: 3%;overflow-x: hidden;
            overflow-y: hidden">
              <div style="width: 80%;height: 30px;background-color: rgba(230,230,250,0);margin-top: 5%;margin-left: 5%;line-height: 30px;
              color: #333333;font-weight: 600;">
                众模型预测结果对比
              </div>
              <div style="width: 88%;height: 30%;background-color: rgba(230,230,250,0);margin-top: 7%;margin-left: 5%;line-height: 30px;
              color: #333333;font-weight: 600;">
                <div style="width: 78%;height: 100%;background-color: rgba(255,250,205,0);float:left;padding-top: 8px;">
                  <div class="bar1">
                    <el-progress :percentage="prediction[0]" :stroke-width="12" :show-text="false"></el-progress>
                  </div>
                  <div class="bar2">
                    <el-progress :percentage="prediction[1]" :stroke-width="12" :show-text="false"></el-progress>
                  </div>
                  <div class="bar3">
                    <el-progress :percentage="prediction[2]" :stroke-width="12" :show-text="false"></el-progress>
                  </div>
                  <div class="bar4">
                    <el-progress :percentage="prediction[3]" :stroke-width="12" :show-text="false"></el-progress>
                  </div>
                </div>
                <div style="width: 18%;height: 100%;background-color: rgba(250,240,230,0);float: right;text-align: center;">
                  <div style="width: 100%;height: 30px;background-color: rgba(255,250,205,0);">
                    {{prediction[0]}}%
                  </div>
                  <div style="width: 100%;height: 30px;background-color: rgba(231,255,205,0);">
                    {{prediction[1]}}%
                  </div>
                  <div style="width: 100%;height: 30px;background-color: rgba(255,250,205,0);">
                    {{prediction[2]}}%
                  </div>
                  <div style="width: 100%;height: 30px;background-color: rgba(228,255,205,0);">
                    {{prediction[3]}}%
                  </div>
                </div>
              </div>
              <table style="width: 88%;height: 40%;background-color: rgba(255,160,122,0);margin: 20px auto;color: #969ba0;">
                <tr style="border-top: 1px solid #EEEEEE">
                  <th style="font-weight: 600;width: 40%;border-left: none;border-right: 1px solid #EEEEEE">模型名称</th>
                  <th style="font-weight: 600;width: 60%;border-left: none">预测正常概率</th>
                </tr>
                <tr>
                  <td class="col1">Machine Learning</td>
                  <td class="col2">{{prediction[0]}}%</td>
                </tr>
                <tr>
                  <td class="col1">CRNN(MFCC)</td>
                  <td class="col2">{{prediction[1]}}%</td>
                </tr>
                <tr>
                  <td class="col1">CNN(Mel spectrum)</td>
                  <td class="col2">{{prediction[2]}}%</td>
                </tr>
                <tr>
                  <td class="col1">CNN(Second order spectrum)</td>
                  <td class="col2">{{prediction[3]}}%</td>
                </tr>
              </table>
            </div>
          </div>
          <div style="width: 55%;height: 100%;background-color: rgba(255,255,255,1);float: right;border-radius:  0 0 8px 0;position: relative">
            <div style="height: 86%;width: 1.6px;background-color: #EEEEEE;position:absolute;margin-top: 7%"></div>
            <div style="width: 90%;height: 50px;background-color: #fff;margin-top: 7%;margin-left: 5%;">
              <div style="width: 100%;height: 30px;line-height: 30px;background-color: rgba(250,240,230,0);color: #333333;font-weight: 600;">
                &nbsp;&nbsp;&nbsp;&nbsp;综合预测结果
              </div>
              <div style="width: 100%;height: 20px;line-height: 20px;background-color: rgba(255,250,205,0);font-size: 13px;color: #969ba0">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Comprehensive prediction results
              </div>
            </div>
            <div style="width: 90%;margin-left: 5%;height: 32%;background-color: rgba(230,230,250,0);">
              <div id="circle-chart-res1" style="height: 100%;width: 30%;background-color: #fff;display: inline-block;overflow: hidden">
              </div>
              <div style="height: 100%;width: 20%;background-color: rgba(255,250,205,0);display: inline-block;overflow: hidden">
                  <div style="height: 50%;width: 100%;background-color: rgba(250,240,230,0);margin: 0 auto;margin-top: 42%;overflow: hidden">
                    <div style="width: 70%;height: 60%;background-color: rgba(230,230,250,0);line-height: 66px;text-align: center;
                    font-size: 20px;font-weight: 600;overflow: hidden">
                      {{finalResults.primary_res[0]*100}}%
                    </div>
                    <div style="width: 70%;height: 40%;background-color: rgba(255,240,245,0);line-height: 20px;text-align: center;
                    font-size: 13px;color: #969ba0">
                      Normal
                    </div>
                  </div>
              </div>
              <div id="circle-chart-res2" style="height: 100%;width: 30%;background-color: #fff;display: inline-block;overflow: hidden"></div>
              <div style="height: 100%;width: 20%;background-color: rgba(255,250,205,0);display: inline-block;overflow: hidden">
                <div style="height: 50%;width: 100%;background-color: rgba(250,240,230,0);margin: 0 auto;margin-top: 42%;overflow: hidden">
                  <div style="width: 70%;height: 60%;background-color: rgba(230,230,250,0);line-height: 66px;text-align: center;
                    font-size: 20px;font-weight: 600;overflow: hidden">
                    {{finalResults.primary_res[1]*100}}%
                  </div>
                  <div style="width: 70%;height: 40%;background-color: rgba(255,240,245,0);line-height: 20px;text-align: center;
                    font-size: 13px;color: #969ba0">
                    Abnormal
                  </div>
                </div>
              </div>
            </div>

            <div style="width: 90%;height: 45%;background-color: rgba(250,240,230,0);margin-top: 2%;margin-left: 5%;">
              <div style="width: 100%;height: 100%;background-color: rgba(230,230,250,0);"
                   v-if="this.finalResults.primary_res[0] > this.finalResults.primary_res[1]">
                <div style="width: 100%;height: 30px;line-height: 30px;background-color: rgba(240,128,128,0);font-size: 16px;
                color: #333333;font-weight: 600;">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;智能诊断建议
                </div>
                <div style="width: 100%;line-height: 18px;background-color: rgba(255,240,245,0);font-size: 13px;color: #969ba0">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Smart diagnostic advice
                </div>

                <div style="width: 90%;height: 30px;line-height: 30px;background-color: rgba(255,240,245,0);margin-top: 16px;
                  margin-left: 5%;font-size: 14px;color: #969ba0">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;根据AI智能算法预测，该心音样本状况良好，请保持轻松愉快的心情继续生活！
                </div>
              </div>

              <div style="width: 100%;height: 100%;background-color: rgba(255,240,245,0);" v-else>
                <div style="height: 100%;width: 40%;background-color: rgba(250,240,230,0);float: left;overflow: hidden">
                  <div style="width: 100%;height: 30px;line-height: 30px;background-color: rgba(240,128,128,0);font-size: 16px;
                color: #333333;font-weight: 600;">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;二级诊断结果
                  </div>
                  <div style="width: 100%;line-height: 18px;background-color: rgba(255,240,245,0);font-size: 13px;color: #969ba0">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Secondary diagnosis
                  </div>
                  <div id="secondary-predict-chart" style="width: 90%;height: 80%;background-color: rgba(230,230,250,0);">

                  </div>
                </div>
                <div style="width: 60%;height: 100%;background-color: rgba(222,248,213,0);float: right;overflow: hidden">
                  <div style="width: 100%;height: 30px;line-height: 30px;background-color: rgba(240,128,128,0);font-size: 16px;
                color: rgba(51,51,51,0.48);font-weight: 600;">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;智能诊断建议
                  </div>
                  <div style="width: 100%;line-height: 18px;background-color: rgba(255,240,245,0);font-size: 13px;color: rgba(150,155,160,0.56)">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Smart diagnostic advice
                  </div>
                  <div style="width: 90%;height: 30px;line-height: 30px;background-color: rgba(255,240,245,0);margin-top: 36px;
                  margin-left: 5%;font-size: 14px;color: #969ba0">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    根据AI智能算法预测，该心音样本可能存在{{finalResults.secondary_category[secondary_forecast]}}病征，请进行进一步诊疗！
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import ApexCharts from 'apexcharts'
import {request} from "@/api/request";
export default {
  name: "Report",
  data() {
    return {
      active: 2,
      cur_characteristic: 'first',
      sample: {},
      proportion: [],
      prediction: [45,68,73,38],
      finalResults: {
        primary_res : [0.2,0.3],
        secondary_res: [0.2,0.1,0.1,0.5],
        secondary_category: ['a','b','c','d']
      },
      work_step_status: ["success", "success", "process"],
      org_chart:{},
      filtered_chart: {},
      denoised_chart: {},
      division_chart: {},
      c1_chart: {},
      c2_chart: {},
      c3_chart: {},
      c4_chart: {},
      mix_chart: {},
      mel_chart: {},
      res1_chart: {},
      res2_chart: {},
      secondary_predict_chart: {},
      origin_options: {
        series: [],
        noData: {
          text: 'Loading...',
        },
        stroke: {
          width: [1]
        },
        chart: {
          // id: 'area-datetime',
          type: 'line',
          height: 350,
          zoom: {
            autoScaleYaxis: true
          },
          toolbar: {
            show: true,
            tools: {
              reset: true,
              download: false,
              selection: false,
              zoom: true,
              zoomin: true,
              zoomout: true,
              pan: false,
            }
          }
        },
        dataLabels: {
          enabled: false
        },
        markers: {
          size: 0,
          style: 'hollow',
        },
        xaxis: {
          labels: {
            show: false
          }
        },
      },
      filtered_options: {
        series: [],
        noData: {
          text: 'Loading...',
        },
        stroke: {
          width: [1]
        },
        chart: {
          // id: 'area-datetime',
          type: 'line',
          height: 280,
          zoom: {
            autoScaleYaxis: true
          },
          toolbar: {
            show: true,
            tools: {
              reset: true,
              download: false,
              selection: false,
              zoom: true,
              zoomin: true,
              zoomout: true,
              pan: false,
            }
          }
        },
        dataLabels: {
          enabled: false
        },
        markers: {
          size: 0,
          style: 'hollow',
        },
        xaxis: {
          labels: {
            show: false
          }
        },
      },
      denoised_options: {
        series: [],
        noData: {
          text: 'Loading...',
        },
        stroke: {
          width: [1]
        },
        colors: ['#7d59f3'],
        chart: {
          // id: 'area-datetime',
          type: 'line',
          height: 280,
          zoom: {
            autoScaleYaxis: true
          },
          toolbar: {
            show: true,
            tools: {
              reset: true,
              download: false,
              selection: false,
              zoom: true,
              zoomin: true,
              zoomout: true,
              pan: false,
            }
          }
        },
        dataLabels: {
          enabled: false
        },
        markers: {
          size: 0,
          style: 'hollow',
        },
        xaxis: {
          labels: {
            show: false
          }
        },
      },
      division_options: {
        series: [],
        noData: {
          text: 'Loading...'
        },
        chart: {
          height: 295,
          type: 'line',
          stacked: false,
        },
        stroke: {
          width: [2,1],
          curve: ['stepline', 'straight']
        },
        plotOptions: {
          bar: {
            columnWidth: '50%'
          }
        },
        xaxis: {
          labels: {
            show: false
          }
        },
        tooltip: {
          shared: true,
          intersect: false,
          y: {
            formatter: function (y) {
              if (typeof y !== "undefined") {
                return y.toFixed(0) + " points";
              }
              return "";

            }
          }
        }
      },
      spectrum_chart: {},
      mix_options: {
        series: [],
        chart: {
          height: 300,
          type: 'line',
          stacked: false,
        },
        stroke: {
          width: [1.6, 1.6, 1.6],
          curve: 'smooth'
        },
        plotOptions: {
          bar: {
            columnWidth: '50%'
          }
        },
        // grid: {
        //   row: {
        //     colors: ['#fff', '#f2f2f2']
        //   }
        // },
        // xaxis: {
        //   labels: {
        //     rotate: -45
        //   },
        //   categories: ['Systolic_RR', 'Diastolic_RR', 'Systole_Diastole', 'Systole_S1', 'Diastole_S2',
        //     'Skew_S1', 'Skew_Systole', 'Skew_S2', 'Skew_Diastole', 'Kurtosis_S1', 'Kurtosis_Systole',
        //     'Kurtosis_S2', 'Kurtosis_Diastole'],
        //   tickPlacement: 'on'
        // },
        // chartOptions: {
        //   xaxis: {
        //     labels: {
        //       rotate: -45
        //     },
        //     categories: ['Apples', 'Oranges', 'Strawberries', 'Pineapples', 'Mangoes', 'Bananas',
        //       'Blackberries', 'Pears', 'Watermelons', 'Cherries', 'Pomegranates', 'Tangerines', 'Papayas'
        //     ],
        //     tickPlacement: 'on'
        //   },
        // },
        yaxis: {
          title: {
            text: 'Eigenvalues',
          },
          labels: {
            show: false
          },
          min: -10,
          max: 10
        },
        tooltip: {
          shared: true,
          intersect: false
        },
      },
      mel_options: {
        series: [{
          name: 'Metric1',
          data: [1,2,3,4,5,6,7]
        },
        {
          name: 'Metric2',
          data: [1,2,3,4,5,6,7]
        },
        {
          name: 'Metric3',
          data: [1,2,3,4,5,6,7]
        },
        {
          name: 'Metric4',
          data: [1,2,3,4,5,6,7]
        },
        {
          name: 'Metric5',
          data: [1,2,3,4,5,6,7]
        },
        {
          name: 'Metric6',
          data: [1,2,3,4,5,6,7]
        },
        {
          name: 'Metric7',
          data: [1,2,3,4,5,6,7]
        },
        {
          name: 'Metric8',
          data: [1,2,3,4,5,6,7]
        },
        ],
        chart: {
          height: 350,
          type: 'heatmap',
        },
        dataLabels: {
          enabled: false
        },
        colors: ["#008FFB"],
        title: {
          text: 'HeatMap Chart (Single color)'
        },
      },
      spectrum_options: {
        noData: {
          text: 'Loading...'
        },
        series: [{
          name: 'Metric1',
          data: [1,2,3,4,5,6,7]
        },
          {
            name: 'Metric2',
            data: [1,2,3,4,5,6,7]
          },
          {
            name: 'Metric3',
            data: [1,2,3,4,5,6,7]
          },
          {
            name: 'Metric4',
            data: [1,2,3,4,5,6,7]
          },
        ],
        yaxis: {
          labels: {
            show: false
          }
        },
        xaxis: {
          labels: {
            show: false
          }
        },
        chart: {
          height: 320,
          type: 'heatmap',
        },
        dataLabels: {
          enabled: false
        },
        colors: ["#008FFB"],
        title: {
          text: 'BiSpectrum HeatMap Chart'
        },
      },
      radar_options: {
        series: [{
          name: 'Series 1',
          data: [80, 50, 30, 40, 100, 20],
        }],
        chart: {
          height: 350,
          type: 'radar',
        },
        title: {
          text: 'Basic Radar Chart'
        },
        xaxis: {
          categories: ['January', 'February', 'March', 'April', 'May', 'June']
        }
      },
      bar_options: {
        series: [
          {
            name: 'Actual',
            data: [
              {
                x: '2011',
                y: 12,
                goals: [
                  {
                    name: 'Expected',
                    value: 14,
                    strokeWidth: 2,
                    strokeDashArray: 2,
                    strokeColor: '#775DD0'
                  }
                ]
              },
              {
                x: '2012',
                y: 44,
                goals: [
                  {
                    name: 'Expected',
                    value: 54,
                    strokeWidth: 5,
                    strokeHeight: 10,
                    strokeColor: '#775DD0'
                  }
                ]
              },
              {
                x: '2013',
                y: 54,
                goals: [
                  {
                    name: 'Expected',
                    value: 52,
                    strokeWidth: 10,
                    strokeHeight: 0,
                    strokeLineCap: 'round',
                    strokeColor: '#775DD0'
                  }
                ]
              },
              {
                x: '2014',
                y: 66,
                goals: [
                  {
                    name: 'Expected',
                    value: 61,
                    strokeWidth: 10,
                    strokeHeight: 0,
                    strokeLineCap: 'round',
                    strokeColor: '#775DD0'
                  }
                ]
              },
              {
                x: '2015',
                y: 81,
                goals: [
                  {
                    name: 'Expected',
                    value: 66,
                    strokeWidth: 10,
                    strokeHeight: 0,
                    strokeLineCap: 'round',
                    strokeColor: '#775DD0'
                  }
                ]
              },
              {
                x: '2016',
                y: 67,
                goals: [
                  {
                    name: 'Expected',
                    value: 70,
                    strokeWidth: 5,
                    strokeHeight: 10,
                    strokeColor: '#775DD0'
                  }
                ]
              }
            ]
          }
        ],
        chart: {
          height: 350,
          type: 'bar'
        },
        plotOptions: {
          bar: {
            horizontal: true,
          }
        },
        colors: ['#00E396'],
        dataLabels: {
          formatter: function(val, opt) {
            const goals =
                opt.w.config.series[opt.seriesIndex].data[opt.dataPointIndex]
                    .goals

            if (goals && goals.length) {
              return `${val} / ${goals[0].value}`
            }
            return val
          }
        },
        legend: {
          show: true,
          showForSingleSeries: true,
          customLegendItems: ['Actual', 'Expected'],
          markers: {
            fillColors: ['#00E396', '#775DD0']
          }
        }
      },
      step_options: {
        series: [{
          data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58]
        }],
        chart: {
          type: 'line',
          height: 295
        },
        stroke: {
          curve: 'stepline',
        },
        dataLabels: {
          enabled: false
        },
        // title: {
        //   text: 'Stepline Chart',
        //   align: 'left'
        // },
        markers: {
          hover: {
            sizeOffset: 4
          }
        }
      },
      circle_options: {
        c1: {
          series: [],
          chart: {
            height: 120,
            width: 100,
            type: 'radialBar',
          },
          plotOptions: {
            radialBar: {
              hollow: {
                margin: 0,
                size: '70%',
                background: 'transparent',
                image: undefined,
                imageWidth: 50,
                imageHeight: 50,
                imageOffsetX: 0,
                imageOffsetY: 0,
                imageClipped: true,
                position: 'front',
                dropShadow: {
                  enabled: false,
                  top: 0,
                  left: 0,
                  // blur: 3,
                  opacity: 0.5
                }
              },
              track: {
                show: true,
                background: '#f2f2f2',
                strokeWidth: '90%',
                opacity: 1,
                margin: 0,
                dropShadow: {
                  enabled: false,
                  top: 0,
                  left: 0,
                  blur: 3,
                  opacity: 0.5
                }
              },
              dataLabels: {
                show: true,
                name: {
                  show: true,
                  fontSize: '12px',
                  fontFamily: undefined,
                  fontWeight: 600,
                  color: undefined,
                  offsetY: -2
                },
                value: {
                  show: true,
                  fontSize: '12px',
                  fontFamily: undefined,
                  fontWeight: 400,
                  color: undefined,
                  offsetY: 0,
                  formatter: function (val) {
                    return val + '%'
                  }
                }
              }
            },
          },
          labels: ['S1'],
        },
        c2: {
          series: [],
          chart: {
            height: 120,
            width: 100,
            type: 'radialBar',
          },
          colors: ['#FE5F76'],
          plotOptions: {
            radialBar: {
              hollow: {
                margin: 0,
                size: '70%',
                background: 'transparent',
                image: undefined,
                imageWidth: 50,
                imageHeight: 50,
                imageOffsetX: 0,
                imageOffsetY: 0,
                imageClipped: true,
                position: 'front',
                dropShadow: {
                  enabled: false,
                  top: 0,
                  left: 0,
                  // blur: 3,
                  opacity: 0.5
                }
              },
              track: {
                show: true,
                background: '#f2f2f2',
                strokeWidth: '90%',
                opacity: 1,
                margin: 0,
                dropShadow: {
                  enabled: false,
                  top: 0,
                  left: 0,
                  blur: 3,
                  opacity: 0.5
                }
              },
              dataLabels: {
                show: true,
                name: {
                  show: true,
                  fontSize: '12px',
                  fontFamily: undefined,
                  fontWeight: 600,
                  color: undefined,
                  offsetY: -2
                },
                value: {
                  show: true,
                  fontSize: '12px',
                  fontFamily: undefined,
                  fontWeight: 400,
                  color: undefined,
                  offsetY: 0,
                  formatter: function (val) {
                    return val + '%'
                  }
                }
              }
            },
          },
          labels: ['收缩期'],
        },
        c3: {
          series: [],
          chart: {
            height: 120,
            width: 100,
            type: 'radialBar',
          },
          plotOptions: {
            radialBar: {
              hollow: {
                margin: 0,
                size: '70%',
                background: 'transparent',
                image: undefined,
                imageWidth: 50,
                imageHeight: 50,
                imageOffsetX: 0,
                imageOffsetY: 0,
                imageClipped: true,
                position: 'front',
                dropShadow: {
                  enabled: false,
                  top: 0,
                  left: 0,
                  // blur: 3,
                  opacity: 0.5
                }
              },
              track: {
                show: true,
                background: '#f2f2f2',
                strokeWidth: '90%',
                opacity: 1,
                margin: 0,
                dropShadow: {
                  enabled: false,
                  top: 0,
                  left: 0,
                  blur: 3,
                  opacity: 0.5
                }
              },
              dataLabels: {
                show: true,
                name: {
                  show: true,
                  fontSize: '12px',
                  fontFamily: undefined,
                  fontWeight: 600,
                  color: undefined,
                  offsetY: -2
                },
                value: {
                  show: true,
                  fontSize: '12px',
                  fontFamily: undefined,
                  fontWeight: 400,
                  color: undefined,
                  offsetY: 0,
                  formatter: function (val) {
                    return val + '%'
                  }
                }
              }
            },
          },
          labels: ['S2'],
        },
        c4: {
          series: [],
          chart: {
            height: 120,
            width: 100,
            type: 'radialBar',
          },
          colors: ['#FE5F76'],
          plotOptions: {
            radialBar: {
              hollow: {
                margin: 0,
                size: '70%',
                background: 'transparent',
                image: undefined,
                imageWidth: 50,
                imageHeight: 50,
                imageOffsetX: 0,
                imageOffsetY: 0,
                imageClipped: true,
                position: 'front',
                dropShadow: {
                  enabled: false,
                  top: 0,
                  left: 0,
                  // blur: 3,
                  opacity: 0.5
                }
              },
              track: {
                show: true,
                background: '#f2f2f2',
                strokeWidth: '90%',
                opacity: 1,
                margin: 0,
                dropShadow: {
                  enabled: false,
                  top: 0,
                  left: 0,
                  blur: 3,
                  opacity: 0.5
                }
              },
              dataLabels: {
                show: true,
                name: {
                  show: true,
                  fontSize: '12px',
                  fontFamily: undefined,
                  fontWeight: 600,
                  color: undefined,
                  offsetY: -2
                },
                value: {
                  show: true,
                  fontSize: '12px',
                  fontFamily: undefined,
                  fontWeight: 400,
                  color: undefined,
                  offsetY: 0,
                  formatter: function (val) {
                    return val + '%'
                  }
                }
              }
            },
          },
          labels: ['舒张期'],
        },
        res1: {
          series: [70],
          chart: {
            height: 160,
            width: 160,
            type: 'radialBar',
          },
          colors: ['#1362FC'],
          plotOptions: {
            radialBar: {
              hollow: {
                margin: 0,
                size: '60%',
                background: 'transparent',
                image: undefined,
                imageWidth: 50,
                imageHeight: 50,
                imageOffsetX: 0,
                imageOffsetY: 0,
                imageClipped: true,
                position: 'front',
                dropShadow: {
                  enabled: false,
                  top: 0,
                  left: 0,
                  // blur: 3,
                  opacity: 0.5
                }
              },
              dataLabels: {
                value: {
                  formatter: function (val) {
                    return ''
                  }
                }
              }
            },
          },
          labels: [''],
        },
        res2: {
          series: [30],
          chart: {
            height: 160,
            width: 160,
            type: 'radialBar',
          },
          colors: ['#FFC368'],
          plotOptions: {
            radialBar: {
              hollow: {
                margin: 0,
                size: '60%',
                background: 'transparent',
                image: undefined,
                imageWidth: 50,
                imageHeight: 50,
                imageOffsetX: 0,
                imageOffsetY: 0,
                imageClipped: true,
                position: 'front',
                dropShadow: {
                  enabled: false,
                  top: 0,
                  left: 0,
                  // blur: 3,
                  opacity: 0.5
                }
              },
              dataLabels: {
                value: {
                  formatter: function (val) {
                    return ''
                  }
                }
              }
            },
          },
          labels: [''],
        },
        secondaryRes: {
          series: [45,68,73,38],
          chart: {
            height: 180,
            width: 150,
            type: 'radialBar',
          },
          plotOptions: {
            radialBar: {
              hollow: {
                size: '30%',
              },
              dataLabels: {
                margin: 5,
                name: {
                  fontSize: '12px',
                  offsetY: -2
                },
                value: {
                  fontSize: '10px',
                  offsetY:-4
                },
                total: {
                  show: true,
                  label: 'Total',
                  formatter: function (w) {
                    // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
                    return 249
                  }
                }
              }
            }
          },
          labels: ['Apples', 'Oranges', 'Bananas', 'Berries'],
        }
      },
    };
  },
  computed: {
    secondary_forecast() {
      let maxv=0, id=0;
      let total_category=this.finalResults.secondary_res;
      for(let i=0;i<total_category.length;i++) {
        if(total_category[i]>maxv) {
          maxv=total_category[i];
          id=i;
        }
      }
      return id;
    }
  },
  mounted() {
    this.org_chart = new ApexCharts(document.querySelector("#org-chart"), this.origin_options);
    this.org_chart.render();

    this.filtered_chart = new ApexCharts(document.querySelector("#filtered-chart"), this.filtered_options);
    this.filtered_chart.render();

    this.denoised_chart = new ApexCharts(document.querySelector("#denoised-chart"), this.denoised_options);
    this.denoised_chart.render();

    this.division_chart = new ApexCharts(document.querySelector("#division-chart"), this.division_options);
    this.division_chart.render();

    this.c1_chart = new ApexCharts(document.querySelector("#circle-chart-1"), this.circle_options.c1);
    this.c1_chart.render();
    this.c2_chart = new ApexCharts(document.querySelector("#circle-chart-2"), this.circle_options.c2);
    this.c2_chart.render();
    this.c3_chart = new ApexCharts(document.querySelector("#circle-chart-3"), this.circle_options.c3);
    this.c3_chart.render();
    this.c4_chart = new ApexCharts(document.querySelector("#circle-chart-4"), this.circle_options.c4);
    this.c4_chart.render();

    this.mix_chart = new ApexCharts(document.querySelector("#mix-chart"), this.mix_options);
    this.mix_chart.render();

    this.mel_chart = new ApexCharts(document.querySelector("#mel-chart"), this.mel_options);
    this.mel_chart.render();

    this.spectrum_chart = new ApexCharts(document.querySelector("#spectrum-chart"), this.spectrum_options);
    this.spectrum_chart.render();

    this.res1_chart = new ApexCharts(document.querySelector("#circle-chart-res1"), this.circle_options.res1);
    this.res1_chart.render();
    this.res2_chart = new ApexCharts(document.querySelector("#circle-chart-res2"), this.circle_options.res2);
    this.res2_chart.render();

    this.secondary_predict_chart = new ApexCharts(document.querySelector("#secondary-predict-chart"), this.circle_options.secondaryRes);
    this.secondary_predict_chart.render();

    let that = this;
    request({
      method: 'post',
      url: '/detection/load/',
      data: {'wave_path': localStorage.getItem("wave_path")}
    }).then(res => {
      let code = res.data.code;
      if(code == 400) {
        that.$notify.error({
          title: '错误',
          message: '音频加载失败！'
        });
      }
      else if(code == 200) {
        that.$notify({
          title: '成功',
          message: '文件加载成功',
          type: 'success'
        });
        that.org_chart.updateSeries([{
          name: 'wave_data',
          data: res.data.wave_data
        }])

        that.filtered_chart.updateSeries([{
          name: 'filtered_data',
          data: res.data.filtered_data
        }])

        that.denoised_chart.updateSeries([{
          name: 'denoised_data',
          data: res.data.denoised_data
        }])

        let max_value = 0;
        for(let i=0;i<res.data.denoised_data.length;i++) {
          max_value = Math.max(max_value,res.data.denoised_data[i][1]);
        }

        that.division_chart.updateSeries([{
            name: 'Heart sound state curve',
            data: res.data.status_data
          },
          {
            name: 'Preprocessed signal',
            data: res.data.denoised_data
          }])

        let rr_mean = res.data.features[0][0];
        let s1_mean = res.data.features[0][2];
        let systole_mean = res.data.features[0][4];
        let s2_mean = res.data.features[0][6];
        let diastole_mean = res.data.features[0][8];

        let s1_proportion = (s1_mean / rr_mean * 100).toFixed(2);
        let s2_proportion = (s2_mean / rr_mean * 100).toFixed(2);
        let systole_proportion = (systole_mean / rr_mean * 100).toFixed(2);
        let diastole_proportion = (diastole_mean / rr_mean * 100).toFixed(2);
        that.proportion = [s1_proportion, systole_proportion, s2_proportion, diastole_proportion]
        that.c1_chart.updateSeries([s1_proportion])
        that.c2_chart.updateSeries([systole_proportion])
        that.c3_chart.updateSeries([s2_proportion])
        that.c4_chart.updateSeries([diastole_proportion])

        let mean_values = [];
        let boundary_values1 = [];
        let boundary_values2 = [];
        for(let i=10,j=0;i<=36;i+=2) {
          mean_values[j] = res.data.features[0][i];
          boundary_values1[j] = (mean_values[j] + res.data.features[0][i+1]).toFixed(3);
          boundary_values2[j] = (mean_values[j] - res.data.features[0][i+1]).toFixed(3);
          j ++;
        }

        let maxv = Math.max(...boundary_values1);
        let minv = Math.min(...boundary_values2);

        console.log(mean_values);
        console.log(boundary_values1);
        console.log(boundary_values2);

        that.mix_chart.updateSeries([{
          name: 'Mean values',
          data: mean_values,
          type: 'line'
        },
        {
          name: 'Upper boundary',
          data: boundary_values1,
          type: 'line'
        },
        {
          name: 'Lower boundary',
          data: boundary_values2,
          type: 'line'
        }])

        that.mix_chart.updateOptions({
          yaxis: {
            title: {
              text: 'Eigenvalues',
            },
            min: minv - 2,
            max: maxv + 2,
            labels: {
              show: false
            },
          },
        })

        let bi_spectrum = res.data.bi_spectrum;
        let bi_spectrum_series = [];
        let cur_row = [];
        for(let i=180;i<200;i++) {
          cur_row = [];
          for(let j=150;j<180;j++) {
            cur_row.push((bi_spectrum[i][j] * 1e11).toFixed(3));
          }
          bi_spectrum_series.push({
            name: '',
            data: cur_row
          });

        }

        that.spectrum_chart.updateSeries(bi_spectrum_series);

      }
    }).catch(err => {
      that.$notify.error({
        title: '错误',
        message: '上传音频文件出现异常！'
      });
    })

  }
}
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;

  }
  .main-body {
    overflow: hidden;
    width: 98%;
    height: 2820px;
    background-color: white;
    box-shadow: 0 0 10px rgb(82 63 105 / 8%);
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 8px;
  }
  .show-card {
    width: 92%;
    height: 450px;
    background-color: rgba(230, 234, 250, 0.25);
    /*border: 1px solid rgba(19, 98, 252, 0.44);*/
    margin: 20px auto;
    border-radius: 8px;
    text-align: left;
    padding: 10px;
    padding-top: 0;
  }
  .head-sp {
    color: #828690;
    width: 100%;
    height: 80px;
    display: block;
    /*background-color: lavenderblush;*/
    line-height: 80px;
    text-align: left;
    overflow: hidden;
    transition: .3s;
    letter-spacing: 1px;
    border-bottom: 1px solid #f4f2fa;
  }
  .head-sp:hover {
    color: #333333;
  }
  .logo, .title, .descript {
    display: inline-block;
    height: 100%;
  }
  .logo {
    /*background-color: lavender;*/
    width: 5%;
    overflow: hidden;
    line-height: 60px;
  }
  .title {
    /*background-color: lightgoldenrodyellow;*/
    width: 30%;
    overflow: hidden;
  }
  .descript {
    /*background-color: #f5dfcb;*/
    width: 46%;
    margin-left: 16%;
    overflow: hidden;
  }
  th, td {
    /*background-color: lightgoldenrodyellow;*/
    height: 22%;
    line-height: 22%;
    text-align: center;
    width: 50%;
    border-bottom: 1px solid #F2F2F2;
    letter-spacing: 1px;
    border-left: 1px solid #F2F2F2;
  }
  tr>td {
    /*background-color: linen;*/
    color: #969BA0;
    font-size: 14.5px;
    height: 19.5%;
    line-height: 19.5%;
  }
  tr:hover {
    background-color: rgba(249, 250, 254, 0.6);
  }
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  ::v-deep .el-tabs__content {
    overflow: visible;
  }
  ::v-deep .el-tabs__item {
    color: #333333;
    letter-spacing: 1px;
    font-family: "Microsoft YaHei";
  }
  ::v-deep .el-tabs__item.is-active {
    color: #1362FC;
  }
  ::v-deep .el-icon-arrow-left {
    color: #333333;
  }
  ::v-deep .el-icon-arrow-right {
    color: #333333;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    height: 0;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: #1362FC;
  }
  .chart-td {
    border: none;
    text-align: center;
    overflow: hidden;
  }
  .chart-tr {
    border-top: 1.4px solid #EEEEEE;
  }
  .chart-td-1 {
    width: 40%;
    text-align: left;
    background-color: rgba(250, 240, 230, 0.18);
    overflow: hidden;
    padding-left: 10px;
  }
  .chart-td-2 {
    width: 35%;
    background-color: rgba(230, 230, 250, 0.12);
    overflow: hidden;
    text-align: center;
  }
  .chart-td-3 {
    width: 25%;
    background-color: rgba(230, 230, 250, 0.13);
    overflow: hidden;
  }
  /deep/ .el-progress-bar__outer {
    background-color: #F6F6F6;
  }
  /deep/ .el-progress-bar {
    height: 30px;
  }
  /deep/ .bar1 .el-progress-bar__inner {
    background-image: linear-gradient(to right, #4898f1, #46f1c7);
  }
  /deep/ .bar2 .el-progress-bar__inner {
    background-image: linear-gradient(to right, rgb(248, 207, 176), #fa9d89);
  }
  /deep/ .bar3 .el-progress-bar__inner {
    background-image: linear-gradient(to right, #f271f8, #8e57f3);
  }
  /deep/ .bar4 .el-progress-bar__inner {
    background-image: linear-gradient(to right, #f687b5, #ef8ae7);
  }
  .col1 {
    width: 65%;
  }
  .col1, .col2 {
    font-weight: 500;
    color: #969ba0;
    font-size: 14px;
  }
  .col1 {
    border-left: none;
  }
</style>